<template>
    <el-dialog v-model="dialogVisible" title="角色详情" :close-on-click-modal="false" append-to-body width="800"
        class="editDialog" align-center>

        <el-form inline class="basicForm" label-position="right" v-model="formObj" ref="formRef" :rules="rules"
            label-width="100px">
            <el-form-item label="角色名称" class="full-width-item" prop="roleName">
                <el-input v-model="formData.roleName"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="角色编码" class="full-width-item" prop="roleCode">
                <el-input v-model="formData.roleCode"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="数据权限" class="full-width-item">
                <el-select v-model="formData.dataScope" placeholder="请选择数据权限">
                    <el-option v-for="item in dataScopeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <br />
            <el-form-item label="备注" class="full-width-item">
                <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" v-model="formData.remark">
                </el-input>
            </el-form-item>

        </el-form>

        
        <template #footer>
            <el-button @click="dialogVisible = false" auto-insert-space>取消</el-button>
            <el-button type="primary" @click="handleSubmit" auto-insert-space>确定</el-button>
        </template> 
    </el-dialog>
</template>

<script setup>
import { ref, defineProps,reactive  } from "vue";

import { ElMessage } from "element-plus";

import { reqRoleSave } from "@/utils/requests";

const emits = defineEmits(["confirm"]);

let formRef = ref();

let dialogVisible = ref(false);


const dataScopeList = ref([
    { label: "全部数据", value: 0 },
    { label: "本部门及以下", value: 10 },
    { label: "本部门", value: 20 },
    { label: "仅本人", value: 30 }
]);

const rules = reactive({
    roleName: [
        { required: true, message: '请输入角色名称', trigger: 'blur' }   // trigger 必写
    ], roleCode: [
        { required: true, message: '请输入角色编码', trigger: 'blur' }   // trigger 必写
    ],
})


/* 1. 初始值常量 */
const initialForm = () => ({
    roleName: '',
    roleCode: '',
    dataScope: null,
    remark: ''
})

let formData = reactive(initialForm());


let isEdit = ref(false);
let winTitle = ref("");


const openDialog = (rowData) => { 
    dialogVisible.value = true;

    if (!rowData) {
        winTitle.value = "新增";

        Object.keys(formData).forEach(k => delete formData[k]);

        Object.assign(formData, initialForm());

        isEdit.value = false;
    } else {
        winTitle.value = "修改";

        Object.assign(formData, rowData);

        isEdit.value = true;
    }
};

const handleSubmit = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            reqRoleSave({ ...formData }).then((data) => {
                if (data) {
                    emits("confirm");
                    ElMessage.success("保存成功");
                    dialogVisible.value = false;
                } else {
                    ElMessage.error("保存失败");
                }
            });
        } else {
            const firstMsg = Object.keys(fields)
                .map(k => fields[k][0]?.message)
                .find(Boolean)

            ElMessage.error(firstMsg)

            return false;
        }
    });

};

defineExpose({ openDialog });

</script>

<style scoped lang="scss">
.title {
    display: flex;
    line-height: 40px;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #333;

    &:before {
        content: "";
        width: 5px;
        height: 20px;
        background: #409eff;
        margin-right: 10px;
    }
}

.full-width-item {
    width: 98% !important;
    /* 让整个 el-form-item 占据整行 */
}

.basicForm,

.selectionForm {
    >* {
        width: calc(50% - 20px);
        margin-right: 20px;

        :deep(.el-date-editor) {
            width: 100%;
        }
    }

    >.long {
        width: calc(100% - 20px);
        margin-right: 20px;
    }

    .sumUnit {
        .text {
            margin-right: 10px;
        }
    }
}

.opt {
    margin-top: 50px;
    text-align: right;
    padding-right: 20px;
}
</style>
